<template>
  <div class="wall">
    <h1>我的错题</h1>

    <div class="content">
      <div class="operate">

      </div>

      <el-button type="primary" @click="start()">开始刷题</el-button>
      <div class="table">
        <el-table
        :data="errQuestionsData"
        style="width: 100%"
      >
        <el-table-column type="index" width="50" label="序号">
          <template #default="scope">
            {{ (currentPage -1) * 10 + 1+scope.$index }}
          </template>
        </el-table-column>

        <el-table-column prop="errorQuestion" label="错误题目" />
        <el-table-column  label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status == 1">已修正</el-tag>
            <el-tag type="warning" v-else>未修正</el-tag>
          </template>
        </el-table-column>

        <el-table-column  min-width="70" width="70">
          <template #default="scope">
            <el-link type="primary" @click="showErrQuestion(scope.row)">查看</el-link>
          </template>
        </el-table-column>

      </el-table>
      </div>

      <div class="page">
        <el-pagination
          v-model="currentPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog
    v-model="dialogVisible"
    width="500"
  >
    <span :loading="optionsLoading" style="font-size:15px">题目：{{ currentErrQuestion.errorQuestion }}</span>
    {{ currentErrQuestion.questionType == 0 ? "【单选题】" : currentErrQuestion.questionType == 1 ?  "【多选】" : currentErrQuestion.questionType == 2 ?  "【判断】" : ""}}
    <p v-for="(item,index) in currentQuestionOptions" :key="index" :loading="optionsLoading">{{item.options}}: {{item.optionDescribe}}</p>

    正确答案： 
    <span v-for="(item,index) in currentQuestionOptions" :key="index"  style="color:blue;font-size:15px"> 
      <span v-if="item.status == 1">{{item.options}}&nbsp;</span>      
     </span> 
    <hr>
    <span>您的答案:{{currentErrQuestion.studentAnswer}}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import axios from "@/axios/index.js";
import { ElMessageBox } from 'element-plus'
import router from "@/router";
import { useStudentStore } from "@/stores/student";

let dialogVisible = ref(false)
let errQuestionsData = ref();


let currentPage = ref(1)
let optionsLoading = ref(true)
//当前错题
let currentErrQuestion = reactive({})

//当前题目选项 和正确答案
let currentQuestionOptions = reactive([])


let total = ref(10)

/** 错题获取*/
function getErrQuestions() {
  axios.get("api/v1/front/errQuestions",{
    params:{
      current:currentPage.value,
      size:10,
      studentId: useStudentStore().studentInfo.studentId
    }
  }).then((res) => {
    errQuestionsData.value = res.data.data.records
    total.value = parseInt(res.data.data.total)
  });
}

getErrQuestions();

//点击查看时   根据id获取该题目的选项
function showErrQuestion(row){ 
  optionsLoading.value = true
  axios.get('api/v1/front/errorNoteBookOption',{
    params:{
      questionId:row.id,
    }
  }).then(res =>{
    optionsLoading.value = false
    currentQuestionOptions = res.data.data
  })
  dialogVisible.value = true
  currentErrQuestion = row
}


/** 切换当前也时*/
function handleCurrentChange(val){
  currentPage.value  = val
  getErrQuestions()

}

//开始刷题事件
function start(){
  ElMessageBox.confirm(
      '是否开始刷题',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    router.push({path: '/startQuestion', query: {source:2}})
  })
}
</script>

<style scoped>
h1 {
  font-size: 30px;
  font-weight: normal;
  margin: 0;
  flex-shrink: 0;
}
.wall {
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #a3a3a3;
}

.content {
  position: relative;
  cursor: pointer;
  height: 100%;
  padding: 10px;
  border: 1px solid #a3a3a3;
  flex-shrink: 1;
}

.page{
  z-index: 9;
  position: absolute;
  bottom: 5px;
}
</style>